
<style>
#salida{
  color: #000;
  font-size: 20px;
  text-align: center;
}
#numero{
  color: #ccc;
  font-size: 30px;
  width: 100%;
  height: 5%;
  border: solid 1px #999;
  border-radius: 7px;
  background-color: #999;
   text-align: center;
}

#visor{
  width: 250px;
  height: 30%;
  border: solid 1px #999;
  border-radius: 7px;
  margin-left: 10px;
  padding: 3px;
  background-color: #fff;
}
#visor_puesto{
  width: 250px;
  height: 30%;
  border: solid 1px #999;
  border-radius: 7px;
  margin-left: 10px;
  padding: 3px;
  background-color: #ccc;
}

#visor2{
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  height: 5%;
  border: solid 1px #999;
  background-color: #999;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

#tanque{
  margin-left: 10px;
}
</style>

<script type="text/javascript">
$(document).ready(function() {

    function salidaActiva()
    {
      value = $('#activa').text();
        //var dataString = 'value='+value;

      $.ajax({
            type: "POST",
            url: "lecturaActiva", //paneles/metodo
            //data: dataString,
            success: function(data) {
                $('#activa').text(data);
            }
           });
    }
    setInterval(salidaActiva, 1000);


   function getRandValue()
   {
        valueSalida = $('#activa').text();
        value = $('#value').text();
        var dataString = 'valueSalida='+valueSalida;

        $.ajax({
            type: "POST",
            url: "lecturaSalida", //paneles/metodo
            data: dataString,
            success: function(data) {
                $('#value').text(data);
            }
        });
    }
    setInterval(getRandValue, 1000);
    
});
</script>



<table class="table table-hover" align="center">

<div class="container">
<!-- <div id="jqmeter-horizontal"></div>
<div id="jqmeter-horizontal2"></div>
<div id="jqmeter-horizontal3"></div>
<div id="jqmeter-vertical"></div>
<div id="jqmeter-vertical2"></div>
-->
<?php

echo'<table border="0" width="1000px"; >
       <tr>  
    ';

       $obj_tanque = new Tanque();
       $listado_tanques = $obj_tanque->get_iterated();
        foreach ($listado_tanques as $tanque) 
        {
          if($tanque->eliminado == 0)
              {
               echo '
                    <td align="center">
                     <div style="border:1px solid #999; border-radius:10px; background-color:#99cccc;">';
                      
                      echo '<table border="0"><tr>';
                      foreach ($listado as $salida) 
                      {
                        $id_elemento = $salida->id;
                        //$tanque = $salida->getTanque();
                        $puesto = $salida->getPuesto();

                        if ($tanque->id == $salida->tanques_id)
                        {

                              $obj_turno = new Turno();
                              $listado_turnos = $obj_turno->get_iterated();

                              foreach ($listado_turnos as $turno) 
                              {

                                  if ($turno->puestos_id == $puesto->id)
                                  {
                                      $operario = $turno->getOperario()->nombre;
                                      $turno_operario = $turno->duracion;
                                  }
                              }

                          echo ' 
                            <td>
                          <div id="visor_puesto">
                            <table border="0" cellspacing="10"  >
                                 <tr> 
                                   <td colspan="2" id="salida">'.$puesto->nombre.'</td>                             
                                 </tr>
                                 <tr> 
                                   <td >Operario:</td>   
                                   <td >'.$operario.'</td>                            
                                 </tr>
                                  <tr> 
                                   <td >Turno: </td>   
                                   <td >'.$turno_operario.'</td>                            
                                 </tr>
                            </table>
                          </div>
                          <div id="visor">
                              <table border="0" style=" background-color: #fff;" cellspacing="10" width=240px; >
                                 <tr> 
                                   <td colspan="2">
                                   <span id="activa">0</span>
                                   <div id="salida">SALIDA '.$salida->nroSalida.'</div></td>                             
                                 </tr>

                                 <tr> 

                                    <td rowspan="2">Despacho (litros)</br>
                                    <div id="numero">
                                    <span id="value">0</span>

                                    '.$salida->ultimoDespacho.'
                                    </div>
                                    </td>                         


                                    <td align="center">Acumulado (litros)</br><div id="visor2">'.$salida->acumulado.'</div></td>
                                 </tr>
                                 <tr> 
                                    <td align="center">Calibración (cm3/pulso)</br><div id="visor2">'.$salida->calibracion.' </div></td>
                                 </tr>
                                 <tr> 
                                   <td colspan="2">Sensor extracción</td>                             
                                 </tr>
                                 <tr> 
                                   <td colspan="2"></td>                             
                                 </tr>
                              </table>
                          </div>

                          </td>';
                         
                          }
                      }

                echo '</tr></table>

                      <div id="tanque"></br>
                         '.$tanque->identificacion.'</br>
                          <div id="jqmeter-vertical'.$tanque->id.'"></div>
                      </div> 
                </div>
                </td>                                     
                ';              
              }
        }
        echo '</tr>           
                </table>';  
      ?>



<script>
$(document).ready(function(e) 
{
  <?php 
    $obj_tanque2 = new Tanque();
         $listado_tanques2 = $obj_tanque2->get_iterated();
          foreach ($listado_tanques2 as $tanque2) 
          {
            if($tanque2->eliminado == 0)
                {               
                  echo "$('#jqmeter-vertical".$tanque2->id."').jQMeter({goal:'500,000',raised:'250,000',orientation:'vertical',width:'250px',height:'200px',barColor:'#ccc'});";
                }
          }
  ?>

});
</script>      
